<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>行高单位em、百分数、数值的区别</title>
    </head>
    <body>
        <h2>父元素行高单位为em</h2>
        <div class="wrap" style="line-height:1.5em;font-size:12px;">
            这是父元素
            <div class="content" style="font-size:20px;">
                这是子元素<br>
                line-height行高问题
            </div>
        </div>
        <h2>父元素行高单位为数值</h2>
        <div class="wrap" style="line-height:1.5;font-size:12px;">
            这是父元素
            <div class="content" style="font-size:20px;">
                这是子元素<br>
                line-height行高问题
            </div>
        </div>
        <h2>父元素行高单位为百分比</h2>
        <div class="wrap" style="line-height:150%;font-size:12px;">
            这是父元素
            <div class="content" style="font-size:20px;">
                这是子元素<br>
                line-height行高问题
            </div>
        </div>
        <h2>结论:</h2>
        <ol>
            <li>行高单位为em、百分数时，子元素的行高是父元素的行高</li>
            <li>行高单位为数值时，子元素的行高为子元素字体的大小乘以父元素行高的数值</li>
            <li>此处的父元素泛指祖先元素</li>
        </ol>
    </body>
</html>